<template>
    <div i="info-table">
        <a-row class="row-container">
            <a-col :span="6" class="col-left" v-if="sideData">
                <!-- <el-image
                    class="row-item-pic"
                    :style="{width: sideData.width || '140px', height: sideData.height || '100px'}"
                    :src="sideData.url"
                    :preview-src-list="[sideData.url]">
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image> -->
                <!-- 图片 -->
                <span>{{sideData.name}}</span>
            </a-col>
            <a-col :span="span">
                <template v-for="(item, index) in data">
                    <a-row class="row-flex" :key="index" v-if="index % 2 === 0">
                        <a-tooltip placement="right">
                            <template slot="title">
                                <span>{{item.label}}</span>
                            </template>
                            <a-col :span="labelSpan">{{item.label}}</a-col>
                        </a-tooltip>
                        <a-tooltip placement="right">
                            <template slot="title">
                                <span>{{item.value}}</span>
                            </template>
                            <a-col :span="valueSpan">{{(item.value || item.value === 0) ? item.value : '--'}}</a-col>
                        </a-tooltip>
                    </a-row>
                </template>
            </a-col>
            <a-col :span="span">
                <template v-for="(item, index) in data">
                    <a-row class="row-flex" :key="index" v-if="index % 2 === 1">
                        <a-tooltip placement="right">
                            <template slot="title">
                                <span>{{item.label}}</span>
                            </template>
                            <a-col :span="labelSpan">{{item.label}}</a-col>
                        </a-tooltip>
                        <a-tooltip placement="right">
                            <template slot="title">
                                <span>{{item.value}}</span>
                            </template>
                            <a-col :span="valueSpan">{{(item.value || item.value === 0) ? item.value : '--'}}</a-col>
                        </a-tooltip>
                    </a-row>
                </template>
            </a-col>
        </a-row>
    </div>
</template>
<script>
export default {
    name: 'datatable',
    props: {
        data: {
            type: Array,
            default: () => []
        },
        sideData: {
            type: Object,
            default: () => {}
        },
        span: {
            type: Number,
            default: 9
        },
        labelSpan: {
            type: Number,
            default: 6
        },
        valueSpan: {
            type: Number,
            default: 18
        }
    },
    data () {
        return {

        }
    },
    methods: {

    }
}
</script>
<style lang="scss">
    [i="info-table"] {
        margin-bottom: 48px;
        .row-container {
            display: flex;
        }
        .col-left {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            border: 1px solid #eee;
            background: #f9fafc;
            .row-item-pic {
                // width: 200px;
                // height: 160px;
                image {
                    object-fit: cover;
                }
                .image-slot {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 30px;
                    background: #f5f7fa;
                }
            }
            // img {
            //     display: block;
            //     object-fit: cover;
            // }
            span {
                display: block;
                line-height: 2;
            }
        }
        .row-flex {
            > div {
                border: 1px solid #eee;
                // display: flex;
                // align-items: center;
                // justify-content: center;
                text-align: center;
                height: 48px;
                padding: 10px;
                overflow: hidden;
                white-space: nowrap!important;
                text-overflow: ellipsis;
                &:first-child {
                    background: #f9fafc
                }
            }
        }
    }
</style>
